Hello and welcome to this lecture.
In this lecture we are going to create the structure for our app using hate t email.
Inside my His team male far from my text editor directory.
So the very first line of code you need to specify in haste email the document is the dog the dog type
is not part of the hastier mail document is just a declaration to notify the web browsers trying to
display this page then this content of the page is an hastier mail document.
That's what the declaration is.
I have introduced a couple of asml tag line to three line 2.
There is where the beginning of the hate email documents stance starts from.
That's the opening tag line for is the clause in.
You can tell detax match could you consider that a line under the hastier mail and that so to distinguish
between the opening and closing the closing normally has the slash before the tag name right.
If you have any attributes is usually included in the opening tack.
Introduce an attribute in line to chord Ellie N G stands for language.
And I've set the value to equals to English which is e n shocked.
So with attributes you enclose the values in quotes attributes are there to provide extra information
about the element.
So every other email tag or element will write will be embedded or nested inside this hastier mail so
any content between the opaline hit the mail unclosing this email is regarded as an hastier mail document.
I have introduced the head tag on line 3 so that's the opening tag and that's the close in her tag on
line it within the head tag.
You have several other tacks the head tags.
Basically you can't see it's content when the page is viewed.
It's mainly there for informational purposes to the web browser.
So inside the head tag I haven't got a title tag basically which displays the title of the web page
of Wassaw online file.
Quite a reference to my style site and I've got a main style sheet and I've also got a link to online
7 to Google.
Okay so google this.
This link here has some special fonts which I want to use for the project.
So this is a link to that font.
I want to use lines 7 is a script for.
Query will be used in some query code.
Jake Query is a javascript library so you will be using some of that code in our javascript so in order
to have reference to the query library you need to include it in the head section.
That's what I've done on my 7 so this is a reference to the query library.
It saves me installing the library on my computer I can just access it via that link here.
I have introduced a couple tags named line while those are met are tags and they got attributes to him
the line for metal cast said the card said physically refers to the encoding type.
That is the type of characters that will be used.
That this page supports So the standard for all web browser is utf dash it or the current owner or using
utf that it should be able to read most characters like five metal metal tag.
Have quite a attribute code name and in fairly few viewport or have also got another work within that
line of code quote content and values which equals to a device with a comma.
And those are the initial dash scale equations.
One points here are what that means basically is that the on line 5 is that this page can be viewed
by any device regardless of the screen size so you can view with a small screen on my screen.
It will automatically resize that initial skill.
Skill means that you can zoom the initial scale to zoom so that allows you to zoom in and zoom out and
that's what that's for.
I have introduced the body tag their body tag is where the main content of the web page will be displayed.
Okay so anything in the body tag is the content that people actually see when they view the web page.
So inside the body tag are have some other tags nested and got an input tag and a type is text.
So that's where people were actually actually after taps on.
Okay and was given in a place called old name.
I've also got and.
The importance of giving them I.D. attributes which we will use later to
use later.
All right.
Apologies I've had to change the code.
It actually inserted the wrong could which was input tap we don't really need input tags.
Here is we doing equates false apologies for let's all have to replace that code.
Basically the body tag here.
What this does it oaklyn body.
And this is the same body tag.
Okay you've seen that bit.
OK.
So I've cut it deep here.
Like 15.
This would be the main container is called quave container.
So this will wrap or the other deaves.
And you notice that the pig is there an ENT here which means it's a wrapper for the or the contents.
All right.
So I've got one tank look which is ahead in tag that's just a title on line 16 on line 18 to let me
just bring this up a bit.
So from line 17 to 20.
Three.
So we've got several diff tags here.
The tab called Class notice of giving them attributes of class will be used in the class names for stylin
purposes.
So giving all of them a class attribute with the values here specified.
So line 17 was a class day with the name question.
We've got a U L which is the on ordered list.
This is where it will have to make a selection of the choices for the quiz.
Selection will now lie in 19.
D d will be a shell that will be the message for bequeaths line.
20 is the result.
You know that will pop up after the quiz.
You know your answers.
Line 1 is the next part in so you click next to should.
Next question saw this Classes will we use late in our Seer says tall stout these beef's okay to make
them more pronounce and then I've got it break tag here just to create some space underneath this button
and then finally will get his script back.
It's always good to attach your script tag at the very end of your hastier middle document.
This group carafes refroze to our Jav us group here which will write later.
The reason for inserting this script at the bottom and not in the head is that you hope this group will
only execute after all the rest of the page has been loaded.
If you insert it in the head it will not work because you may prevent P from load so it's always best
to insert your script at the bottom of the page just before the closing.
But it had to write that way.
Every page will load completely before the script is executed.
So I'll save this and then we can have a look and see what the document looks like.
All right so I mean a directory.
Just click to open and we can see.
Okay so this is what they paid.
Looks like at the moment it doesn't look much but when we start writing our javascript code we gonna
use dad to make this big a bit more interactive so that's saved for this lecture.
Thanks for watching.
Bye for now.